<template>
    <view class="news">
        <!-- 内容 -->
        <tabs
            :current="current"
            @change="handleChange"
            height="80"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
			 :titleActiveColor ="tabcolor"
        >
        <tab v-for="(item, i) in tabList" :key="i" :name="item.name">
            <view class="news-list pt-[20rpx]">
                <news-list :cid="item.id" :i="i" :index="current"></news-list>
            
			</view>
        </tab>

        </tabs>
        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/news-list.vue'
import { getArticleCate } from '@/api/news'

const tabList = ref<any>([])
const current = ref<number>(0)
const tabcolor = "#C9161B"
const handleChange = (index: number) => {
    console.log(index)
    current.value = Number(index)
	
}

const getData = async () => {
    const data = await getArticleCate()
    tabList.value = [].concat(data)
}

onLoad((options) => {
    getData()
})
</script>

<style lang="scss">
.news {
    &-search {
        margin-bottom: 2rpx;
    }

    &-list {
        height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
    }
}

</style>
